<!--  -->
<template>
  <div>
    <el-dialog :title="title" :visible.sync="dialogFormVisible" @closed="closed" width="580px" :close-on-click-modal="false">
      <el-form ref="savePdtableAttr" :model="formData" label-width="90px" :rules="rules" class="formDialog">
        <el-form-item label="属性名称" prop="title">
          <el-input v-model="formData.title"  style="width:250px;" size="small"
            placeholder="输入不超过100个字符" maxlength="100"></el-input>
        </el-form-item>
        <el-form-item label="比例因子" prop="proportion">
          <el-input v-model="formData.proportion" autocomplete="off" style="width:120px;" size="small"
            :disabled="radioProportion" @blur="blurProportionEvent"></el-input>
          <el-checkbox style="margin:0 8px 0 12px;" v-model="radioProportion">自动</el-checkbox>
          <span class="tip-color">输入百分比，无须带有百分号</span>
        </el-form-item>
        <el-form-item label="查询条件" prop="siteSearch" v-if="formData.type !== 2 && formData.type !== 3">
          <el-radio-group v-model="formData.siteSearch">
            <el-radio size="mini" :label="1">是</el-radio>
            <el-radio size="mini" :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否展示" prop="status">
          <el-radio-group v-model="formData.status">
            <el-radio size="mini" :label="1">是</el-radio>
            <el-radio size="mini" :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="显示位置" prop="afterBy" v-if="formData.id === 0 && data.length > 0">
          <span>置于</span>
          <el-select v-model="formData.afterBy" placeholder="请选择" size="small" @change="afterByChange">
            <el-option v-if="firstId" :label="'属性名称'"
              :value="firstId"></el-option>
            <el-option v-for="(item,index) in dataFilter(formData.id)" :key="index" :label="item.title"
              :value="item.id"></el-option>
          </el-select>
          <b class="blue">之后</b>
        </el-form-item>
        <el-form-item label="文字内容" v-if="formData.type === 2">
          <el-input v-model="formData.confObj.tdText" style="width:220px;" autocomplete="off" size="small"
            placeholder="输入不超过100个字符" maxlength="100"></el-input>
        </el-form-item>
        <el-form-item label="下载方式" v-if="formData.type === 3 && formData.confObj" >
          <el-radio-group v-model="formData.confObj.type">
            <el-radio size="mini" :label="1">图标</el-radio>
            <el-radio size="mini" :label="2">文字内容</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="下载文字" v-if="formData.type === 3 && formData.confObj && formData.confObj.type !== 1">
          <el-input v-model="formData.confObj.tdText" style="width:220px;" autocomplete="off" size="small"
            placeholder="输入不超过100个字符" maxlength="100"></el-input>
        </el-form-item>
        <el-form-item label="浏览文字" v-if="formData.type === 3 && formData.confObj && formData.confObj.type !== 1">
          <el-input v-model="formData.confObj.obText" style="width:220px;" autocomplete="off" size="small"
            placeholder="输入不超过100个字符" maxlength="100"></el-input>
        </el-form-item>
        <el-form-item label="分类链接" v-if="formData.type === 4">
          <el-radio-group v-model="formData.conf.linkshow">
            <el-radio size="mini" :label="0">关闭</el-radio>
            <el-radio size="mini" :label="1">开启</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="分类分隔符" v-if="formData.type === 4">
          <el-input v-model="formData.conf.separator" autocomplete="off" style="width:120px;" size="small"
            placeholder="" maxlength="20"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closed" size="small">取 消</el-button>
        <el-button type="primary" @click="submit" size="small">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    system: {
      type: Object
    },
    resetData: {
      type: Function
    }
  },
  data () {
    // 校验输入的比例因子
    var checkProportion = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入比例因子'))
      }
      if (value === '自动宽度') {
        callback()
      } else {
        if (parseFloat(parseFloat(value).toFixed(2)) > 0 && parseFloat(parseFloat(value).toFixed(2)) < 100.01) {
          callback()
        } else {
          return callback(new Error('请输入比例因子范围 0.00~100.00'))
        }
      }
    }
    return {
      // 是否显示弹窗
      dialogFormVisible: false,
      // 加载
      loading: false,
      // 弹窗标题
      title: '',
      // 是否自动
      radioProportion: true,
      // 表单数据
      formData: {
        id: 0,
        // 属性类型
        type: 1,
        // 属性名称
        title: '',
        // 比例因子
        proportion: '自动宽度',
        // 是否显示
        status: 1,
        // 是否可查询
        siteSearch: 1,
        // 至于什么什么之后
        afterBy: null
      },
      // 第一个属性
      firstId: null,
      // 获取所有的属性数据
      data: [],
      rules: {
        title: [
          { required: true, message: '请输入属性名称', trigger: 'blur' },
          { max: 100, message: '输入不超过100个字符', trigger: 'blur' }
        ],
        proportion: [
          { required: true, message: '请输入比例因子', trigger: 'blur' },
          { validator: checkProportion, trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    radioProportion: {
      handler (bool) {
        if (bool) {
          this.formData.proportion = '自动宽度'
        } else {
          if (this.formData.proportion === '自动宽度') {
            this.formData.proportion = '10.00'
          }
        }
      },
      deep: true
    }
  },
  computed: {
    dataFilter () {
      let _this = this
      return function (_formDataId) {
        if (!(_formDataId > 0)) {
          return _this.data
        }
        return _this.data.filter(item => !(_formDataId === item.id))
      }
    }
  },
  methods: {
    changeThis () {
      this.$forceUpdate()
    },
    show (title, data) {
      this.title = title
      if (data.id === 0) {
        this.formData = Object.assign(this.formData, data)
      } else if (data.id > 0) {
        if (data.proportion === '-1') {
          this.radioProportion = true
        } else {
          this.radioProportion = false
        }
        this.formData = {
          id: data.id,
          type: data.type,
          // 属性名称
          title: data.title,
          // 比例因子
          proportion: data.proportion === '-1' ? '自动宽度' : parseFloat(data.proportion).toFixed(2),
          // 是否显示
          status: data.status,
          // 是否可查询
          siteSearch: data.siteSearch
        }
        if ((data.type === 2 || data.type === 3) && data.conf) {
          this.$set(this.formData, 'confObj', JSON.parse(data.conf))
          if (!this.formData.confObj) {
            if (data.type === 2) {
              this.$set(this.formData, 'confObj', {tdText: ''})
            }
            if (data.type === 3) {
              this.$set(this.formData, 'confObj', {tdText: '', type: 1, obText: ''})
            }
          }
        } else if (data.type === 2) {
          this.$set(this.formData, 'confObj', {tdText: ''})
        } else if (data.type === 3) {
          this.$set(this.formData, 'confObj', {tdText: '', type: 1, obText: ''})
        }
        if (data.type === 4 && data.conf) {
          this.$set(this.formData, 'conf', JSON.parse(data.conf))
        }
      } else {
        console.error('data 数据未知', data)
        return
      }
      this.dialogFormVisible = true
      this.loading = true
      // 获取信息系统中的所有属性数据
      this.$post('/system/pdtable/title-infos', { systemId: this.system.id }).then(response => {
        if (response && response.length > 0) {
          this.data = response
          if (typeof data.orderNum === 'number') {
            let num = parseInt(data.orderNum) - 1
            let find = this.data.find((element) => {
              return parseInt(element.orderNum) === num
            })
            if (!find) {
              this.formData.afterBy = this.data[0].id
              this.firstId = this.data[0].id
            } else {
              this.formData.afterBy = find.id
            }
          } else {
            this.formData.afterBy = this.data[this.data.length - 1].id
          }
        }
        this.loading = false
      })
    },
    afterByChange () {
      this.formData = JSON.parse(JSON.stringify(this.formData))
    },
    closed () {
      if (this.$refs['savePdtableAttr']) {
        this.$refs['savePdtableAttr'].clearValidate()
      }
      this.formData = {
        id: 0,
        // 属性名称
        title: '',
        // 比例因子
        proportion: '自动宽度',
        // 是否显示
        status: 1,
        // 是否可查询
        siteSearch: 1,
        // 至于什么什么之后
        afterBy: null,
        conf: null
      }
      this.title = ''
      this.loading = false
      this.firstId = null
      this.radioProportion = true
      this.dialogFormVisible = false
    },
    // 失去 Proportion 焦点时触发
    blurProportionEvent () {
      this.formData.proportion = isNaN(parseFloat(this.formData.proportion)) ? '10.00' : parseFloat(this.formData.proportion).toFixed(2)
    },
    // 提交表单
    submit () {
      this.$refs['savePdtableAttr'].validate(valid => {
        if (valid) {
          // 提交数据给后台
          let param = {
            titleId: this.formData.id,
            systemId: this.system.id,
            title: this.formData.title,
            proportion: this.radioProportion ? '-1' : parseFloat(this.formData.proportion).toFixed(2),
            status: this.formData.status,
            siteSearch: this.formData.siteSearch,
            afterId: this.formData.afterBy
          }
          if (this.formData.confObj && (this.formData.type === 2 || this.formData.type === 3)) {
            param.conf = JSON.stringify(this.formData.confObj)
          }
          if (this.formData.conf && this.formData.type === 4) {
            param.conf = JSON.stringify(this.formData.conf)
          }
          this.$jpost('system/pdtable/title-info-save', param).then(response => {
            if (response && response.title) {
              this.closed()
              this.resetData()
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}

</script>
<style scoped lang="scss">
.formDialog /deep/ .el-form-item{
  margin-bottom: 10px;
  .el-form-item__error{
    padding-top:0;
  }
}
</style>
